<!DOCTYPE html>

<style type="text/css">
.text-red {
	color: red;
	font-weight: 600;
	font-size: 18px;
	position: relative;
	top: 3px;
	margin-right: 3px;
	margin-left: 0px;
	padding: 0px;
}
</style>
    <div id="ep_table_div">
		<!-- 查询窗口 -->
		<div id="mysearch" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	            	<div class="text-center">
	                    <select id="search_year" class="selectpicker"
							data-bind="value:queryCondition.year" name="year"
							onchange="searchSelectYear(this.value)">
							<option style="display: none"></option>
							<option data-th-each="year:${years}" data-th-value="${year}"
								data-th-text="${year}">1</option>
						</select>
	                     <select class="selectpicker" id="search_college"
							data-bind="value:queryCondition.college" name="college"
							onchange="searchSelectCollege(this.value)">
						</select> 
						<select class="selectpicker" id="search_profesion"
							data-bind="value:queryCondition.profesion" name="profesion"
							onchange="searchSelectBanji(this.value)">
						</select>
						<select class="selectpicker" id="search_banji" name="banji"  
						    data-bind="value:queryCondition.searcherbanji">
						</select>
					</div>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button" onclick="findsearch()" class="btn btn-primary" data-dismiss="modal" data-bind="click:queryClick"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
		                <button type="button" onclick="findsearch('2')" class="btn btn-default" data-dismiss="modal" data-bind="click:clearClick"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空</button>
	            	</div>
                </div>
                
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button data-bind="click:addClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
			</button>
			<button data-bind="click:editClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button data-bind="click:deleteClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button>
			<button data-bind="click:searchClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
				<span id="tit">查询</span>
				
			</button>
			<button type="button" class="btn btn-primary" onclick="window.location.href='ep/export'">
			导出
		   </button>
			<input class="btn btn-primary" data-toggle="modal" data-target="#excelmodal" type="button" value="批量导入" />
		</div>
		 <div class="modal fade" id="excelmodal">
		   <div class="modal-dialog" >
		       <div class="modal-content">
		          <div class="modal-header">
		                导入教学计划
		               <button class="close"  data-dismiss="modal"><span>&times;</span></button>
		          </div>
		          <div class="modal-body">
	                  <form id="importForm" action="ep/excelimport" method="post" enctype="multipart/form-data"
							class="form-search" style="padding-left:20px;text-align:center;" onSubmit="loading('正在导入，请稍等...');"><br/>
						    <span style=" margin-left:35px;float:left; line-height:30px; height:30px;">请选择上传文件：</span>
				            <input id="uploadFile" name="file" type="file" style=" width:300px;border:1px solid #ccc; margin-left:140px;" ><br/><br/>　 　
							<input id="btnImportSubmit" class="btn btn-primary" onclick="upload();" value="   导    入   "/>
							<a href="ep/exportmoban">下载模板</a>
			          </form>
	              </div>
		       </div>
		   </div>
		</div>
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<th data-checkbox="true"></th>
					<th data-field="xnxq">学年学期</th>
					<th data-field="xy">学院</th>
					<th data-field="zy">专业</th>
					<th data-field="bj">班级</th>
					<th data-field="kcmc">课程</th>
					<th data-field="kcdm">课程代码</th>
					<th data-field="xf">学分</th>
					<th data-field="kclb">课程类别</th>
					<th data-field="zongxs" >总学时</th>
					<th data-field="zhouxs">周学时</th>
					<th data-field="jslx">教室类型</th>
					<th data-field="skzc">上课周次</th>
					<th data-field="teachername">上课教师</th>
					<th data-field="xmh" data-formatter="xmhforatter">项目化课程</th>
				</tr>
			</thead>
		</table>
	</div>
	
<!-- 以下是javascript内容 -->	
<script type="text/javascript">
$(function sxbg(){
    var data =  {
	    tableParams : {
	    	url : 'ep/page'
	    	},
	    	urls : {
	    		delete : 'ep/delete',
	    		update : 'ep/edit',
	    		add : 'ep/edit',
	    		search:'ep/search'
	    	},
	    	queryCondition : {
	    		year : '',
	    		college : '',
	    		profesion : '',
	    		searcherbanji : ''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('ep_table_div'));	
	
});

$("#search_year").selectpicker({
	title : '选择年级',
	width:'fit'
});
$("#search_college").selectpicker({
	title : '选择学院',
	width:'fit'
});
$("#search_profesion").selectpicker({
	title : '选择专业',
	width:'fit'
});
$("#search_banji").selectpicker({
	title : '选择班级',
	width:'fit'
});
function searchSelectYear(year) {
	$.post('ep/getCollege', {
		year : year
	}, function(result) {
			$('#search_college,#search_profesion,#search_banji').html(
					'<option style="display: none"></option>');
			
			for (var i = 0; i < result.length; i++) {
				$('#search_college').append(
						"<option value='"+result[i]+"'>" + result[i]
								+ "</option>");
			}
			$('#search_college').selectpicker('refresh');
			$('#search_profesion').selectpicker('refresh');
			$('#search_banji').selectpicker('refresh');
	})

}

function searchSelectCollege(college) {
	var year = $('#search_year').val();
	$.post('ep/getProfesion', {
		year : year,
		college : college
	},
			function(result) {
					$('#search_profesion,#search_banji').html(
							'<option style="display: none"></option>');
					
					for (var i = 0; i < result.length; i++) {
						$('#search_profesion').append(
								"<option value='"+result[i].profesion+"'>"
										+ result[i].profesion + "</option>");
					}
					$('#search_profesion').selectpicker('refresh');
					$('#search_banji').selectpicker('refresh');
			})
}

function searchSelectBanji(profesion) {
	var college = $('#search_college').val();
	var year = $('#search_year').val();
	if(college==null||year==null||profesion==null){
			
	}else{
		$.post('ep/getBanji', {
			year : year,
			college : college,
			profesion :profesion
		},
				function(result) {
						$('#search_banji').html(
								'<option style="display: none"></option>');
						for (var i = 0; i < result.length; i++) {
							$('#search_banji').append(
									"<option value='"+result[i].id+"'>"
											+ result[i].name + "</option>");
						}
						$('#search_banji').selectpicker('refresh');
				})
	}
}
//清空查询中的bootselect下拉框
	function cleanSearch(){
		var searchs = $('#mysearch').find('div.modal-body').find('select.selectpicker');
		for(var i=0;i<searchs.length;i++){
			if(searchs[i].name=='year'){	//这里排除year,因为我的year数据是直接调用后台的,其他页面删除if
				$(searchs[i]).selectpicker('val','');
				continue;
			}
			$(searchs[i]).html('<option style="display: none"></option>');
			$(searchs[i]).selectpicker('refresh');
		} 
		
	}
	
	function upload() {
		  var formData = new FormData($("#importForm")[0]);
	    $.ajax({
	//        async : flase,
	//        cache : flase,
	        type : "post",
	        data : formData,
	        url : 'ep/excelimport',   //ajax上传的路径
	        dataType : 'text',
	        contentType: false, //必须，告诉jquery不要设置Content-Type请求头
	        processData: false, //必须，告诉jquery不要处理发送的数据
	        success : function(data) {
	      	$('#excelmodal').modal("hide");
	           bootbox.alert(data);
	           $("#mytable").bootstrapTable("refresh", {
				    silent: true //静态刷新 
				  });
	        }
	    });
	}
	 
	function findsearch(value){
		var year=$("#search_year").find("option:selected").text();
		var college=$("#search_college").find("option:selected").text();
		var profesion=$("#search_profesion").find("option:selected").text();
		var banji=$("#search_banji").find("option:selected").text();
		var tit='';
		if(year!=null&&year!=''){
			tit+=year+' \\ ';
		}
		if(college!=null&&college!=''){
			tit+=college+' \\ ';
		}
		if(profesion!=null&&profesion!=''){
			tit+=profesion+' \\ ';
		}
        if(banji!=null&&banji!=''){
			tit+=banji+' \\ ';
		}
		if(tit!=''){
			$('#tit').html(tit.slice(0,-2));
		}else{
			$('#tit').html('查询');
		}
		if(value=="2"){
			$('#tit').html('查询');
		}
	}
	function xmhforatter(value){
		return value?"是":"否";
	}
</script>